<template>
	<view class="plan-list page">
		<view v-if="list.length">
			<!-- <view class="top">
				<u-search placeholder="请输入关键字" v-model="searchVal" bg-color="#fff" shape="round" :clearabled="true"
					@search="onSearch"></u-search>
			</view> -->
			<view class="list">
				<scroll-view class="scroll-box" scroll-y>
					<view class="item" v-for="(item,index) in list" :key="item.noticeId" @tap="toDetail(item)">
						<view class="content">
							<view class="name">
								<text>平面图{{index}}: {{item.createTime}}_{{item.createBy}}</text>
							</view>
							<view class="info">
								<view>
									<text>所属案卷: {{vuex_archives.name}}</text>
								</view>
								<view>
									<text>创建人: {{item.createBy}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="toApp">
						<button type="primary" @click="toApp">前往画图</button>
					</view>
				</scroll-view>

			</view>

		</view>
		<view class="empty" v-else>
			<u-empty text="暂无平面图" mode="list"></u-empty>
		</view>
		<view class="submitBtn">
			<button class="iconfont" type="primary" @click="onAddRecord">&#xe664;</button>
		</view>
		<u-modal v-model="openModelObj.show" show-cancel-button @confirm="openModelConfirm">
			<view class="slot-content">
				<view class="model-content">
					<text>即将打开magicplan应用，您确认前往吗？</text>
				</view>
			</view>
		</u-modal>
		<u-modal v-model="backModelObj.show" show-cancel-button @confirm="backModelConfirm"
			:confirm-text="backModelObj.confirmText" title="创建平面图">
			<view class="slot-content">
				<!-- <view class="model-content">
					<u-input v-model="value" type="text" border placeholder="请输入创建平面图后的链接" />
				</view> -->
				<view>
					<button type="default" size="mini" @click="chooseFile">点击上传文件</button><text>{{file.name}}</text>
				</view>
			</view>
		</u-modal>
		<u-modal v-model="copyModelObj.show" show-cancel-button @confirm="copyModelConfirm"
			:confirm-text="copyModelObj.confirmText" title="请复制">
			<view class="slot-content">
				<view class="model-content">
					<text>{{copyModelObj.text}}</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchVal: '',
				list: [],
				show: false,
				value: '',
				openModelObj: {
					show: false,
				},
				backModelObj: {
					show: false,
					confirmText: '确认'
				},
				copyModelObj: {
					show: false,
					text: '',
					confirmText: '复制'
				},
				file: {
					name: '',
					path: ''
				}
			};
		},
		created() {
			this.getNoticeList()
		},
		methods: {
			onSearch() {
				console.log('搜索');
			},
			getNoticeList() {
				this.$u.api.record.list(4).then(res => {
					if (res.code == 200) {
						this.list = res.rows
					}
				})
			},
			toDetail(item) {
				// #ifdef APP-PLUS
				this.copyModelObj.text = item.createTime
				this.copyModelObj.show = true
				// #endif
			},
			copyModelConfirm() {
				uni.setClipboardData({
					data: this.copyModelObj.text,
					success: function(res) {
						uni.showToast({
							title: '复制成功',
						});
					}
				});
			},
			openModelConfirm() {
				const isApp = plus.runtime.isApplicationExist({
					pname: 'com.sensopia.magicplan'
				});

				if (isApp) {
					console.log('App已安装~');
					let sendData = {
						"email": "chenlengsu_it@163.com",
						"password": "password",
						"mode": "password",
						"baseUrl": "https://cloud.magicplan.app/login"
					};
					plus.runtime.launchApplication({
						pname: "com.sensopia.magicplan",
						extra: sendData
					}, (e) => {
						console.log('error', e.message)
					}, );
					this.backModelObj.show = true
				} else {
					console.log('App未安装~');
				}
			},
			backModelConfirm() {

			},
			onAddRecord() {
				// this.openModelObj.show = true
				// this.backModelObj.show = true
				uni.navigateTo({
					url: `./add?token=${this.vuex_token}`
				})
			},
			toApp() {
				const isApp = plus.runtime.isApplicationExist({
					pname: 'com.sensopia.magicplan'
				});

				if (isApp) {
					console.log('App已安装~');
					let sendData = {
						"email": "chenlengsu_it@163.com",
						"password": "password",
						"mode": "password",
						"baseUrl": "https://cloud.magicplan.app/login"
					};
					plus.runtime.launchApplication({
						pname: "com.sensopia.magicplan",
						extra: sendData
					}, (e) => {
						console.log('error', e.message)
					}, );
					this.backModelObj.show = true
				} else {
					console.log('App未安装~');
				}
			},
			chooseFile() {
				let self = this
				uni.chooseFile({
					count: 1, //默认100
					success: function(res) {
						console.log(res);
						console.log(res.tempFilePaths[0]);
						self.file.path = res.tempFilePaths[0]
						self.file.name = res.tempFiles[0].name
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.plan-list {
		.top {
			margin: 40upx 20upx 20upx;
		}

		.list {
			padding: 20upx 28upx;

			.scroll-box {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				overflow: hidden;

				height: calc(100vh - 44px);
				/* #ifdef H5 */
				height: calc(100vh - 44px - 85px);
				/* #endif */
			}

			.item {
				padding: 20upx 20upx;
				margin-bottom: 20upx;
				display: flex;
				align-items: stretch;
				background: #fff;
				border-radius: 5px;
				min-height: 150upx;

				image {
					display: block;
					width: 240upx;
					min-width: 240upx;
					max-width: 240upx;
					max-height: 160upx;
					margin-right: 20upx;
				}

				.content {

					flex-direction: column;
					display: flex;
					justify-content: space-between;

					.name {
						color: #303133;
						font-weight: bold;
						margin-bottom: 20upx;

						text {
							word-break: break-all;
							@include textOverflow(2);
						}
					}

					.info {
						color: #606266;
						display: flex;
						font-size: 20upx;
						margin-bottom: 10upx;

						view:first-of-type {
							margin-right: 16upx;
						}
					}
				}
			}
		}

		.toApp {
			position: fixed;
			bottom: 40upx;
			left: 0;
			right: 0;
			width: 80%;
			margin: 0 auto;
		}

		.submitBtn {
			position: fixed;
			bottom: 40upx;
			right: 40upx;

			button {
				@include flex;
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				font-size: 40upx;
			}
		}

		.model-content {
			padding: 20upx;
		}
	}
</style>
